<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../../../css/personimfcss/headphoto.css">
        <script src="http://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
        <script th:inline="javascript">
            var userid = [[${userid}]];
            var file
            //从数据库拿头像
            $(function(){
                $.ajax({
                    url:'showhphoto.do?userid='+userid,
                    success:function(data){//data服务器返回的数据
                        if(data.length!=0) {
                            img = $("<img src=\'"+ "..\\..\\..\\"+data + "\' alt='' id=\'touxiang1\'>")
                            $(".touxaing").append(img)
                        }
                        else {
                            img = $("<img src=\'../../../images/personmes/touxiang.png\' alt='' id=\'touxiang1\'>")
                            $(".touxaing").append(img)
                        }
                    }
                });
            });
                function ProcessFile(e) {
                    file = document.getElementById('chooseImage0').files[0];
                    console.log(file);
                    var reader = new FileReader();
                    if (file) {
                        reader.onload = function (event) {
                            var txt = event.target.result;
                            $("#cropedBigImg0").attr('src', txt);

                        };
                    }
                    reader.readAsDataURL(file);
                }

                function contentLoaded() {
                    document.getElementById('chooseImage0').addEventListener('change',
                        ProcessFile, false);
                }
                window.addEventListener("DOMContentLoaded", contentLoaded, false);
//上传文件并更新头像显示
                function updateimg() {
                    var formdata = new FormData();
                    formdata.append('file', file);
                    formdata.append('userid', userid)
                    if (file != null) {
                        //ajax上传
                        $.ajax({
                            async: false,
                            type: 'Post',
                            url: "updataimg.do",
                            dataType: 'json',
                            data: formdata,
                            contentType: false,//ajax上传图片需要添加
                            processData: false,//ajax上传图片需要添加
                            success: function (data) {
                                console.log(data)
                                $(".touxaing").empty()
                                if(data.length!=0) {
                                    img = $("<img src=\'"+ "..\\..\\..\\"+data + "\' alt='' id=\'touxiang1\'>")
                                    $(".touxaing").append(img)
                                }
                                else {
                                    img = $("<img src=\'../../../images/personmes/touxiang.png\' alt='' id=\'touxiang1\'>")
                                    $(".touxaing").append(img)
                                }
                                window.location.reload()

                            }
                        })

                    }
                }

        </script>
    </head>
    <body>
        <div class="zong">
            <div class="header">
                <h4>当前我的头像</h4>
                <p>如果您还没有设置自己的头像，系统会显示为默认头像，您需要自己上传一张新照片来作为自己的个人头像</p>
                <div class="touxaing">

                </div>

            </div>
            <div class="main">
                <h4>设置我的新头像</h4>
                <p>请选择一个新照片进行上传编辑。</p>
                <p>头像保存后，会自动刷新，显示新的头像</p>
                <div class="newtouxiang">
                    <div class="div_model">
                        <img id="cropedBigImg0" src="../../../images/personmes/renwu.png" class="div_model_img"/><br>
                            <span class="fileinput-button">
                                <span>选择头像</span>
                                <input type="file" class="file" accept="image/gif,image/jpeg, image/png, image/jpg" id="chooseImage0" value="上传头像"><br>
                            </span>
                            <br>
                            <input type="submit" id="queren" onclick="updateimg()" value="确认修改">
                     </div>
                </div>
                 
            </div>
        </div>
    </body>
</html>